<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务</title>
    <link rel="icon" href="./images/logo.ico" />
    <script src="./js/sethtmlfontSize.js"></script>
    <link rel="stylesheet" href="./css/flex.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/service.css">
    <link rel="stylesheet" href="./css/searchhead.css">
</head>
<body>
    <!--头部搜索-->
    <header class="searchs">
        <div class="search-left">
            <i></i>
        </div>
        <div class="search-center">
            <span class="center-span">服务</span>
            <div class="clears"></div>
            <img class="seacher-img" src="images/triangle_icon_search.png" alt="">
             <input id="search-input" type="text" autofocus>
          <!--下拉菜单选项-->
          <div id="classify">
               <i></i>
               <ul class="c-ul">
                   <li><a data-link="goods" href="javascript:void(0)"><img class="classify-img" src="images/goods_icon_search.png" alt=""><span class="classify-span">商品</span></a></li>
                   <li><a data-link="shop" href="javascript:void(0)"><img class="classify-img" src="images/shop_icon_search.png" alt=""><span class="classify-span">商家</span></a></li>
                   <li><a data-link="service" href="javascript:void(0)"><img class="classify-img" src="images/fuwu_icon_search.png" alt=""><span class="classify-span">服务</span></a></li>
               </ul>
           </div>           
        </div>
        <div class="search-right">
           <span id="collect" class="collect"> 搜索</span>

        </div>
        <div class="clears"></div>    
    </header>
    <!--搜索以及显示搜索历史-->
    <div id="service-page">
        <div id="centerHistory">
            <p class="p1">历史搜索</p>
            <ul class="history">
                <li><img class="center-img" src="./images/search_icon.png" alt=""><span class="li-span">外卖</span><i></i></li>
            </ul>
            <div class="history-clear">
                <p class="clear-p">清除历史记录</p>
            </div>
        </div>
        <!--服务项-->
        <div class="contents">
            <div class="clears"></div>
        </div>
       <div class="content">
       </div>
        
        <!--服务类别-->
        <div class="services">
            <ul class="services-ul">
                <li class="new-service change-service "><span class="bottom36c" data-resType="1">最新</span></li>
                <li class="hot-service change-service"><span data-resType="2">热门</span></li>     
            </ul>     
        </div>
        <!--服务详情-->
        <div class="serviceDetail">
        </div>
        <!--正在加载中-->
        <div class="data-loading hide">加载中.....</div>         
    </div>
    
     <!--底部-->
    <footer id="footer" class="footer">
        <div class="pagenum" style="visibility:hidden;">
            <span class="pre">上一页</span>
            <i idaccesskey="currentpage" class="currentpage">2</i>
            <span class="next">下一页</span>   
        </div>
        <div class="footer-ul">
           <ul>
               <li class="first"><a href="./index.html">首页</a></li>
               <li class="li login"><a href="javascript:void(0);">登录</a></li>
               <li class="li"><a href="http://www.shidiquan.cn">客户端</a></li>
               <li class="li"><a href="javascript:void(0);">电脑版</a></li>
               <li class="li"><a href="http://www.shidiquan.cn">帮助</a></li>
           </ul>
       </div>
    </footer>
    <!--悬浮下载app-->
    <div id="download-app" class="download-app">
        <div id="down-content" class="down-content">
            <img class="close" id="close" src="./images/close_icon.png" alt="">
            <div class="down-left l">
                <img src="./images/logo.png" alt="">
            </div>
            <div class="down-center l">
                <p class="unmgntop">下载实地圈客户端</p>
                <p class="mgntop">兼职推广，在家创业，躺着赚钱</p>
            </div>
            <div class="down-right l">
                <span class="">免费下载</span>
            </div>
            <div class="clears"></div>
        </div>
        
    </div>
    <!--回到顶部-->
    <div id="back-top" class="back-top">
        <img src="./images/back_top_icon.png" alt="回到顶部">      
    </div>
    
<body>
    
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
    $(function(){ 
        var l_s;
        if(window.localStorage){
            l_s=window.localStorage;      
        }else{
            l_s={};
        }
        //获取当前城市名
        var currentCity=SYS_GLOBAL_CONFIG.getCurrentCity("currentCity");
        var userId;
        if(window.localStorage){
            userId=parseInt(localStorage.userId);
        }else{
            userId=parseInt(getQueryString("userId"));
            alert("请打开浏览器cookie功能,或者更换浏览器");
            console.log("当前浏览器不支持本地localStorage");
        }
        //下拉菜单选项
         $(".search-center .center-span,.search-center .seacher-img").on("click",function(){
            $("#classify").toggle(); 
        });
        //返回上一页
        $(".search-left").on("click",function(){
            history.back(-1);
        });
        //清除历史记录
        $(".clear-p").on("click",function(){
            $("history").html("");
        });
        //点击搜索框，进行搜索
        $("#search-input").on("click",function(){
            l_s.search_state=1;
            location.href="./searchService.html?currentCity="+currentCity;
        });
        //切换不同的页面
        $(".c-ul li").on("click",function(){
            var links=$(this).find("a").attr("data-link");
            location.href="./"+links+".html?currentCity="+currentCity;
        });
        var currentPage=1;//默认设置当前页为第一页
        var totalPage=1;//设置默认总页数
        var show_count=5;//设置默认每次加载的条数
        var requestData3="";
        var requestData4="";
        var requestData5="";
        var requestData6="";
        var resType=1;
        var url=SYS_GLOBAL_CONFIG.reqUrl,
        async=true,
        type="post";
         var requestData1=JSON.stringify({
             "code":"getPdOrServTypeList",
             "version":"1.0",
             "data":{
                 "parentServiceId":0,
                 "type":"SERVICE",
                 "parentPdTypeId":0
             }
         });
        //获取服务分类
        getData(url,requestData1,handdle_func2,async,type);
        var requestData=JSON.stringify({
            "code":"getLocalService",
            "version":"1.0",
            "data":{
                "address":currentCity,
                "productType":"SERVICE",
                "serviceId":"",
                "productName":"",
                "resType":resType,
                "currentPage":currentPage,
                "showCount":show_count
            }
        });      
        getData(url,requestData,handdle_func1,async,type);
        function getData(url,datas,call_func,async,type){
            console.log("请求参数:"+datas);
            $.ajax({
                url:url,
                type:type,
                datatype:"json",
                async:async,
                contentType:"application/json",
                data:datas,
                success:function(data){
                    call_func(data);
                },
                error:function(msg){
                    console.log(msg);
                    location.href="./error.html";
                }         
            });        
        }
        /**
         *服务信息列表
         **/
        function handdle_func1(data){
            console.log(data);
            var li="";
            var datas=data.data.datas;
            var d_len=datas.length;
            for(var i=0;i<d_len;i++){
                var pic="";
                var fulladdress=datas[i].address;
                var addr=fulladdress.split(" ");
                var imgLen=datas[i].serviceImgs.length;
                if(imgLen>0){
                    for(var j=0;j<imgLen;j++){
                        if(j===3){
                            break;
                        }
                        pic+='<img class="l"  src="'+datas[i].serviceImgs[j].FULLPATH+'" alt="">';
                    }
                }else{
                    pic="";
                }
                if(datas[i].userAuthStatus==1){
                    img1='<img class="img-v" src="./images/vip_icon.png" alt="">';   
                }else{
                    img1=""; 
                }
                li+='<div class="s-detail" data-productId="'+datas[i].productId+'">'+
                        '<aside class="l-aside l">'+
                            '<img src="'+datas[i].userImgPath+'" alt="">'+
                        '</aside>'+
                        '<aside class="r-aside l">'+
                            '<div class="raside-name clear">'+
                                '<div class="pro l">'+
                                    '<p class="pro-name">'+datas[i].productName+'</p>'+
                                     '<i>'+datas[i].saleprice+'/'+datas[i].unit+'</i>'+
                                    '<p class="user-name"><span class="small-light">'+datas[i].userName+'</span>'+img1+'<span class="zwl-as">'+addr[2]+'/'+addr[3]+'</span></p>'+
                                '</div>'+

                                '<div class="clears"></div>'+
                            '</div>'+
                            '<p class="raside-explain">'+datas[i].remark+'</p>'+
                            '<div class="raside-img">'+pic+'<div class="clears"></div>'+
                            '</div>'+
                            '<div class="raside-detail ">'+
                                   '<span class="detail-info">'+datas[i].parentServiceName+'</span>'+
                                   '<img class="mag-l20" src="./images/shoucang.png" alt=""><span class="detail-info">'+datas[i].serviceCollectCount+'</span>'+
                                   '<img class="mag-l20"src="./images/liulan.png" alt=""><span class="detail-info">'+datas[i].viewCount+'</span>'+
                            '</div>'+
                        '</aside>'+
                        '<div class="clears"></div>'+
                    '</div>';
                   
            }
            $(".serviceDetail").append(li);  
            totalPage=data.data.totalPage;
            $(".s-detail").on("click",function(){
                var productId=$(this).attr("data-productId");
                url="./serviceDetail.html?productId="+productId;
                location.href=url;
            });
            /**
             *点击切换最新热门
             **/
            $(".change-service").off("click");
            $(".change-service").on("click",function(){
                $(".serviceDetail").html("");
                resType=$(this).find("span").attr("data-resType");
                console.log(resType+"=====");
                if($(this).find("span").attr("class")=="bottom36c"){
                    $(this).find("span").removeClass("bottom36c");
                }else{
                     $(this).find("span").addClass("bottom36c");
                     if($(this).siblings().find("span").attr("class")=="bottom36c"){
                         $(this).siblings().find("span").removeClass("bottom36c");
                     }
                }
                requestData5=JSON.stringify({
                    "code":"getLocalService",
                    "version":"1.0",
                    "data":{
                        "address":currentCity,
                        "productType":"SERVICE",
                        "resType":resType,
                        "currentPage":currentPage,
                        "showCount":show_count
                    }
                });
                current_Page=1;
                getData(url,requestData5,handdle_func1,async,type);
            });   
        }   
         function handdle_func2(data){
             console.log(data);
             var type="";
             
             for(var i=0;i<data.data.serviceTypes.length;i++){
                 
                 var datafullpath=data.data.serviceTypes[i].iconPath;
                 var pathLen=datafullpath.length;
                 var lastIndex=datafullpath.lastIndexOf(".");
                 var str1=datafullpath.substr(0,lastIndex);
                 var str2=datafullpath.substr(lastIndex,pathLen);;
                 var fullpath=str1+"_shadow"+str2;

                 type+='<a href="./service-classify.html?serviceId='+data.data.serviceTypes[i].serviceId.trim()+'&serviceName='+data.data.serviceTypes[i].serviceName+'" class="c-div" >'+
			             '<img src="'+fullpath+'" alt="">'+
			             '<i>'+data.data.serviceTypes[i].serviceName+'</i>'+
                       '</a>';
             }
             $(".contents").append(type);  
        }
    var current_Page=1;
    /**
     *滚动加载更多*
     **/
    $(window).scroll(function(){
        totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop())-400;
        $(".data-loading").removeClass("hide").addClass("show");
        if((parseFloat($(document).height())-400)==totalheight){ 
            console.log(totalPage+"---"+current_Page);
            if(totalPage>current_Page){
                current_Page+=1;
                var data_p=JSON.stringify({
                    "code":"getLocalService",
                    "version":"1.0",
                    "data":{
                        "productType":"SERVICE",
                        "address":currentCity,
                        "serviceId":"",
                        "resType":resType,
                        "currentPage":current_Page,
                        "showCount":show_count
                    }
        });
                console.log(data_p);
                getData(url,data_p,handdle_func1,async,type);    
            }else{
                $(".data-loading").html("已加载全部");
            }
        } 
     });   
 });
</script>
</html>